<template>
  <div class="user_container">
    <div class="user_container_top_bg"></div>
    <div class="user_list_mobile">
      <div
        class="user_list_content"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        <div class="user_list_content_box">
          <div class="user_list_content_box_right">
            <div
              class="user_list_content_box_right_item"
              v-if="type === 'base'"
            >
              <div class="user_list_content_box_right_item_title">
                <span>基本资料</span>
                <!-- <img
                  @click="handleEditUser"
                  src="@/assets/user-edit.png"
                  alt=""
                /> -->
                <EditIcon @click="handleEditUser" />
              </div>
              <div v-if="userFormShow" class="user_info_form">
                <dynamic-form
                  v-model="formData"
                  :form-items="formItems"
                  :form-attribute="formAttribute"
                  @get-form-ref="
                    (formDom) => {
                      formRef = formDom;
                    }
                  "
                />
                <div class="user_info_form_btn">
                  <t-button @click="determine">确定</t-button>
                  <t-button
                    class="cancel-btn"
                    variant="outline"
                    @click="handleClose"
                  >
                    取消
                  </t-button>
                </div>
              </div>
              <div v-else class="user_info_form">
                <t-descriptions
                  title=""
                  :labelStyle="{
                    width: '120px',
                    color: '#666666',
                    fontSize: '14px',
                    fontWeight: 400,
                    padding: '10px 0',
                  }"
                  :contentStyle="{
                    color: '#333333',
                    fontSize: '16px',
                    fontWeight: 400,
                    padding: '10px 0',
                  }"
                >
                  <t-descriptions-item label="真实姓名：">{{
                    formData.userName
                  }}</t-descriptions-item>
                  <t-descriptions-item label="手机号码：">{{
                    formData.phone
                  }}</t-descriptions-item>
                  <t-descriptions-item label="电子邮箱：">{{
                    formData.email
                  }}</t-descriptions-item>
                  <t-descriptions-item label="身份证号：">{{
                    formData.IDNO
                  }}</t-descriptions-item>
                </t-descriptions>
                <div class="user_info_form_mobile">
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">真实姓名：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.userName }}
                    </div>
                  </div>
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">手机号码：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.phone }}
                    </div>
                  </div>
<!--                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">电子邮箱：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.email }}
                    </div>
                  </div>-->
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">身份证号：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.IDNO }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="user_list_content_box_right_item" v-else>
              <div class="user_list_content_box_right_item_table">
                <div class="user_list_content_box_right_item_table_mdoel">
                  <div
                    v-for="(item, index) in listBook"
                    :key="index"
                    class="user_info_form_mobile_item"
                  >
                    <div class="user_info_form_mobile_item_img">
                      <img src="@/assets/zs-pdf1.png" alt="" />
                    </div>
                    <div class="user_info_form_mobile_left">
                      <div class="user_info_form_mobile_type">
                        {{ item.title }}
                      </div>
                      <div class="user_info_form_mobile_time">
                        {{ item.sendDate }}
                      </div>
                    </div>
                    <div class="user_info_form_mobile_btn">
                      <t-button @click="handleClickDwon(item)">下载</t-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ListBase",
};
</script>

<script setup lang="ts">
import { EditIcon } from "tdesign-icons-vue-next";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

import {
  COLUMNS,
  formData,
  formAttribute,
  formRef,
  formItems,
  resetFormData,
} from "./constants";
import { DynamicForm } from "@/libs/components/dynamicForm";
import { useSettingStore } from "@/store";
import { data, fetchData } from "./request";
import { TOKEN_NAME } from "@/config/global";
import { myBook } from "@/api";
const files = ref([]);
const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();
const image = ref("");
const baseImage = new URL("@/assets/user-avatar.png", import.meta.url);
const userFormShow = ref(false);
const type = ref("base");
const listBook= ref( []);
const postData = () => {
  var item = localStorage.getItem(TOKEN_NAME);
  if (item==null){
    const router = useRouter();
    router.push("login");
    return;
  }
  myBook(formData.value).then(e=> {
    listBook.value=e.rows;
  }).catch(e=> {
    if (e.code=401){
      localStorage.removeItem(TOKEN_NAME);
      const router = useRouter();
      router.push("login");
    }
  })
};

onMounted(() => {
  // 调用list接口
  postData()
  type.value = route.query.type as string;
});
const determine = async () => {
  const result = await formRef.value?.validate();

  if (result !== true) {
    return;
  }
  // 调用保存接口
  // postData(handleClose);
  return;
};
const handleClose = () => {
  userFormShow.value = false;
  resetFormData();
  // fetchData();
};
const handleFail = ({ file }) => {
  // MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
const beforeUpload = (file) => {
  if (file.size > 5 * 1024 * 1024) {
    // MessagePlugin.warning('上传的图片不能大于5M');
    return false;
  }
  return true;
};
// 编辑
const handleEditUser = () => {
  userFormShow.value = !userFormShow.value;
};
// 预览
const handleClickView = (row) => {
  console.log(row);
};
// 下载
const handleClickDwon = (row) => {
  window.open(row.url);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
